<template>
    <div>
        <el-collapse-item title="- 标绘样式" :name="props.id">
            <ul class="editorformTable">
                <li class="editorformItem">
                    <div class="editorformItemName">所在图层</div>
                    <div class="editorformItemFunc">
                        <el-cascader
                            ref="editorformItemFunCascader"
                            v-model="options.folderId"
                            :options="cascaderData"
                            :show-all-levels="false"
                            :props="selectProps"
                            @change="pidInput(options.folderId)"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">绘标类型</div>
                    <div class="editorformItemFunc">{{ options.plottingName }}</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">样式名称</div>
                    <div class="editorformItemFunc">
                        <el-input v-model="options.name" class="editorforminput" placeholder="请输入样式名称" @input="namesInput(options.name)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="texture">
                    <div class="editorformItemName">填充材质</div>
                    <div class="editorformItemFunc">文本</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">绘标编号</div>
                    <div class="editorformItemFunc">
                        {{ options.number }}
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">绘标图标</div>
                    <div class="editorformItemFunc">
                        <div class="editorformItemRight">
                            <!-- <el-image class="img" style="width: 32px; height: 32px" :src="options.icon" fit="cover" /> -->
                            <!-- <div class="uploade"><input type="file" /> <el-button style="color: #ffffff" link size="small">上传</el-button></div> -->
                            <el-upload class="uploade" :show-file-list="false" accept=".png,.jpg,.jpeg" :http-request="fileHpptRequest">
                                <el-button style="color: #ffffff" link size="small">上传</el-button>
                            </el-upload>
                        </div>
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { reactive, computed, ref, nextTick } from "vue";
import { store } from "@/utils/global";
import { uploadDrawIcon } from "@/api/draw";
// import { getCoverage } from "@/api/coverage";
/**
 * 组件传值
 */
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
/**
 * props默认值
 */
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
/**
 * 选择器配置
 */
const selectProps = {
    // checkStrictly: true,
    children: "children",
    label: "name",
    value: "id",
};
/**
 * 删除标绘数据选项
 */
let cascaderData = filterFolders(JSON.parse(JSON.stringify(store.treeData)));
function filterFolders(data: any) {
    return data
        .filter((item: any) => item.type === "folder")
        .map((item: any) => ({
            ...item,
            children: filterFolders(item.children),
        }));
}
/**
 * 设置不能选中的项
 */
const setSelectDatas = (data: any) => {
    data.forEach((v: any, i: any) => {
        if (!v.editor) {
            v.disabled = true;
        } else {
            v.disabled = false;
        }
    });
};
setSelectDatas(cascaderData);
/**
 * 获取当前标绘数据参数
 */
// let layer: any = reactive({});
// layer = computed(() => {
//     return props.graphic;
// });
// let layer: any = reactive(props.graphic);
const options: any = reactive(props.graphic.options);
console.log(options);
const editorformItemFunCascader: any = ref(null);
/**
 * 修改名称
 */
const namesInput = (val: any) => {
    // props.graphic.setOptions({
    //     name: val,
    // });
};
/**
 * 修改pid
 */
const pidInput = (val: any) => {
    // props.graphic.setOptions({
    //     folderId: val,
    // });
    console.log(props.graphic);
};
/**
 * 标绘图标上传
 */
const fileHpptRequest = (files: any) => {
    const file = files.file;
    // 文件类型限制
    const fileAcceptType = ["png", "jpg", "jpeg"];
    // 上传的文件类型
    const fileType = file.type.split("/")[1];
    // 文件大小限制
    const maxSize = 5; // 1MB
    const fileSizeLimit = 1024 * 1024 * maxSize;
    if (fileAcceptType.includes(fileType) && file.size <= fileSizeLimit) {
        const formData = new FormData(); // 创建FormData对象
        formData.append("file", file);
        uploadDrawIcon(formData)
            .then((res) => {
                options.icon = res.data.url;
                ElMessage.success("上传成功");
            })
            .catch((e) => {
                ElMessage.error(`${e.msg},请稍后再试!`);
            });
    } else {
        ElMessage.error(`请上传${fileAcceptType}类型文件,并且文件大小不超过${maxSize}MB!`);
    }
};
</script>
